<template>
	<view class="phone-login-container">
		<view class="form-item">
			<u-icon name="phone" size="36" color="#909399"></u-icon>
			<input 
				type="number" 
				v-model="phone" 
				placeholder="请输入手机号" 
				maxlength="11"
				class="input"
			/>
			<view class="clear-btn" v-if="phone" @click="phone = ''">
				<u-icon name="close" size="24" color="#c0c4cc"></u-icon>
			</view>
		</view>
		
		<view class="form-item">
			<u-icon name="lock" size="36" color="#909399"></u-icon>
			<input 
				type="number" 
				v-model="code" 
				placeholder="请输入验证码" 
				maxlength="6"
				class="input"
			/>
			<view class="code-btn" :class="{ disabled: counting }" @click="getCode">
				<text>{{ codeText }}</text>
			</view>
		</view>
		
		<view class="login-btn" :class="{ active: canLogin }" @click="handleLogin">
			<text>登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				counting: false,
				countDown: 60,
				codeText: '获取验证码'
			}
		},
		computed: {
			canLogin() {
				return this.phone.length === 11 && this.code.length === 6;
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				if (this.counting) return;
				
				if (this.phone.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				// 开始倒计时
				this.counting = true;
				this.countDown = 60;
				this.codeText = `${this.countDown}s`;
				
				// 模拟发送验证码
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});
				
				// 倒计时
				const timer = setInterval(() => {
					this.countDown--;
					this.codeText = `${this.countDown}s`;
					
					if (this.countDown <= 0) {
						clearInterval(timer);
						this.counting = false;
						this.codeText = '获取验证码';
					}
				}, 1000);
			},
			
			// 处理登录
			handleLogin() {
				if (!this.canLogin) return;
				
				uni.showLoading({
					title: '登录中...'
				});
				
				// 模拟登录
				setTimeout(() => {
					uni.hideLoading();
					
					// 保存登录状态和用户信息
					const userInfo = {
						id: 2,
						nickname: '用户' + this.phone.substring(7),
						avatar: '/static/avatar/default.jpg',
						token: 'phone_token_' + Date.now(),
						phone: this.phone
					};
					
					// 保存到全局状态
					getApp().globalData.userInfo = userInfo;
					getApp().globalData.isLogin = true;
					
					// 保存到本地存储
					uni.setStorageSync('userInfo', JSON.stringify(userInfo));
					uni.setStorageSync('isLogin', true);
					
					// 返回上一页
					uni.navigateBack({
						delta: 2 // 返回到登录页的上一页
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-login-container {
		padding: 60rpx 40rpx;
		
		.form-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #e4e7ed;
			margin-bottom: 40rpx;
			
			.input {
				flex: 1;
				height: 100rpx;
				font-size: 32rpx;
				margin-left: 20rpx;
			}
			
			.clear-btn {
				padding: 10rpx;
			}
			
			.code-btn {
				padding: 10rpx 20rpx;
				border-left: 1rpx solid #e4e7ed;
				
				text {
					font-size: 28rpx;
					color: #306EF6;
				}
				
				&.disabled {
					text {
						color: #c0c4cc;
					}
				}
			}
		}
		
		.login-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
			background-color: #e4e7ed;
			border-radius: 45rpx;
			margin-top: 80rpx;
			
			text {
				font-size: 32rpx;
				color: #ffffff;
			}
			
			&.active {
				background-color: #306EF6;
			}
		}
	}
</style> 